<template>
  <view class="app">
    <!-- <view class="page-tip">我的</view> -->
    <view class="top">
      <view class="user-wrapper">
        <image
          class="avatar"
          :src="avatar"
          @click="navTo('/pages/set/userInfo', { login: true })"
        ></image>
        <view class="cen column" v-if="hasLogin">
          <text class="username f-m">{{
            userInfo.NickName || userInfo.Name
          }}</text>
          <text class="user-group">普通会员</text>
        </view>
        <view class="login-box" v-else @click="navTo('/pages/auth/login')">
          <text>请登录</text>
        </view>
        <view class="user-tools">
          <image
            v-if="isMsg"
            class="msg-btn"
            src="/static/xiaoxi.png"
            mode="scaleToFill"
            @click="showMsg"
          ></image>
          <image
            v-else
            class="msg-btn"
            src="/static/fenlei-4@2x.png"
            mode="scaleToFill"
            @click="showMsg"
          ></image>
          <image
            class="setting-btn"
            src="/static/setting.png"
            mode="scaleToFill"
            @click="showSetting"
          ></image>
        </view>
      </view>
    </view>

    <view v-if="isUser" class="valid-wrap">
      <view class="o-header row">
        <text class="tit">认证</text>
      </view>
      <view class="items row">
        <view class="item row block">
          <view class="column">
            <text>您还没有进行企业员工身份认证</text>
            <view class="btn">
              去认证
              <text class="mix-icon icon-you"></text>
            </view>
          </view>
          <image
            class="item-img2"
            src="/static/identityImg.png"
            mode="aspectFit"
            @click="showSuccess"
          ></image>
        </view>
      </view>
    </view>
    <view v-else class="valid-wrap">
      <view class="o-header row">
        <text class="tit">认证</text>
      </view>
      <view class="items row">
        <view class="item row">
          <view class="column">
            <text>身份认证</text>
            <view class="btn">
              去认证
              <text class="mix-icon icon-you"></text>
            </view>
          </view>
          <image
            class="item-img2"
            src="/static/identityImg.png"
            mode="aspectFit"
            @click="showSuccess"
          ></image>
        </view>
        <view class="item item2 row">
          <view class="column">
            <text>企业认证</text>
            <view class="btn">
              去认证
              <text class="mix-icon icon-you"></text>
            </view>
          </view>
          <image
            class="item-img1"
            src="/static/vehicleImg.png"
            mode="aspectFit"
            @click="showSetting"
          ></image>
        </view>
      </view>
    </view>

    <view class="tools-wrap">
      <view class="o-header row">
        <text class="tit">工具箱</text>
      </view>
      <view class="items row">
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon1.png"
            mode="aspectFit"
            @click="showEmployee"
          ></image>
          <text>员工管理</text>
        </view>
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon2.png"
            mode="aspectFit"
            @click="showLine"
          ></image>
          <text>线路管理</text>
        </view>
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon3.png"
            mode="aspectFit"
            @click="showStation"
          ></image>
          <text>站点管理</text>
        </view>
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon4.png"
            mode="aspectFit"
            @click="showIcons"
          ></image>
          <text>员工邀约</text>
        </view>
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon5.png"
            mode="aspectFit"
            @click="showTousu"
          ></image>
          <text>投诉建议</text>
        </view>
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon6.png"
            mode="aspectFit"
            @click="showHelpCenter"
          ></image>
          <text>帮助中心</text>
        </view>
        <view class="item column">
          <image
            class="item-img"
            src="/static/myIcon2.png"
            mode="aspectFit"
            @click="showIcons"
          ></image>
          <text>图标管理</text>
        </view>
      </view>
    </view>

    <!-- 支付成功面板 -->
    <success-modal
      ref="successModal"
      :price="pay_price"
      @onConfirm="successCallback"
    ></success-modal>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import successModal from './components/success-modal.vue';

export default {
  components: {
    successModal,
  },
  data() {
    return {
      isMsg: true,
      isUser: true,
      pay_price: 100,
    };
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['hasLogin']),
    avatar() {
      if (this.userInfo.AvatarUrl) {
        return `https://tplshopping.oss-cn-shanghai.aliyuncs.com/${this.userInfo.AvatarUrl}`;
      }
      return '/static/default-avatar.png';
    },
  },
  methods: {
    showMsg() {
      this.navTo('/pages/mine/msg');
    },
    showSetting() {
      this.navTo('/pages/mine/setting');
    },
    showEmployee() {
      this.isUser = !this.isUser;
    },
    showLine() {
      this.navTo('/pages/mine/line');
    },
    showStation() {
      this.navTo('/pages/mine/station');
    },
    showIcons() {
      this.navTo('/pages/mine/icons');
    },
    showTousu() {
      this.navTo('/pages/mine/tousu');
    },
    showHelpCenter() {
      this.navTo('/pages/mine/help');
    },
    showSuccess() {
      this.$refs.successModal.open();
    },
    //统一支付成功回调
    successCallback() {},
  },
};
</script>

<style>
page {
  background: #f7f8f9;
}
</style>
<style scoped lang="scss">
.app {
  padding-top: calc(var(--status-bar-height) + 40rpx);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-image: url('../../static/page_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 600rpx;
}
.search-btn {
  position: absolute;
  left: 20rpx;
  top: calc(var(--status-bar-height) + 20rpx);
  z-index: 90;
  padding: 20rpx;
  font-size: 32rpx;
  color: white;
}
.page-tip {
  position: absolute;
  left: 50%;
  top: calc(var(--status-bar-height) + 44rpx);
  z-index: 90;
  margin-left: -30rpx;
  font-size: 34rpx;
  color: white;
  line-height: 34rpx;
}

.top {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--status-bar-height) + 52rpx);
  // padding-bottom: 6rpx;
  .user-wrapper {
    display: flex;
    flex-direction: column;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 5;
    padding: 20rpx 30rpx 20rpx;
  }
  .login-box {
    font-size: 36rpx;
    color: #fff;
  }
  .avatar {
    flex-shrink: 0;
    width: 130rpx;
    height: 130rpx;
    border-radius: 100px;
    margin-right: 24rpx;
    border: 4rpx solid #fff;
    background-color: #fff;
  }
  .username {
    font-size: 34rpx;
    color: #fff;
  }
  .user-group {
    align-self: flex-start;
    padding: 10rpx 16rpx;
    margin-top: 16rpx;
    font-size: 20rpx;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 100rpx;
  }
  .user-tools {
    // border: 1px solid red;
    position: absolute;
    top: 0;
    right: 10px;
    width: 100rpx;
    display: flex;
    justify-content: space-between;
    .msg-btn {
      width: 40rpx;
      height: 40rpx;
    }
    .setting-btn {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.valid-wrap {
  width: 700rpx;
  margin: 20rpx auto 0;
  background: #fff;
  border-radius: 10rpx;

  .o-header {
    padding: 28rpx 20rpx 6rpx 26rpx;

    .tit {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      font-weight: 700;
    }
  }
  .items {
    padding: 10rpx 20rpx 26rpx 20rpx;
    .item {
      width: 300rpx;
      height: 120rpx;
      margin: 20rpx auto 0;
      background: linear-gradient(146deg, #fef9ef 0%, #ffeaea 100%);
      border-radius: 20rpx;
      justify-content: center;
      text {
        font-size: 28rpx;
      }
      .btn {
        margin-top: 16rpx;
        color: #7b0606;
        font-size: 24rpx;
        background: linear-gradient(180deg, #fdb726 0%, #facc53 100%);
        border-radius: 16px;
        padding: 6rpx 12rpx 6rpx 16rpx;
        text-align: center;
        font-weight: bold;
      }
      .icon-you {
        margin-left: 4rpx;
        font-size: 22rpx;
      }
      .item-img1 {
        width: 144rpx;
        height: 78rpx;
      }
      .item-img2 {
        margin-left: 40rpx;
        width: 78rpx;
        height: 92rpx;
      }
    }
    .item2 {
      background: linear-gradient(146deg, #fffaf2 0%, #fff2d8 100%);
    }

    .block {
      width: 95%;
      justify-content: space-around;
      .btn {
        width: 130rpx;
      }
    }
  }
}

.tools-wrap {
  width: 700rpx;
  margin: 20rpx auto 0;
  background: #fff;
  border-radius: 10rpx;
  .o-header {
    padding: 28rpx 20rpx 6rpx 26rpx;

    .tit {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      font-weight: 700;
    }
  }
  .items {
    flex-wrap: wrap;
    padding: 10rpx 20rpx 26rpx 20rpx;
    .item {
      padding-top: 20rpx;
      width: 160rpx;
      height: 160rpx;
      justify-content: space-around;
      align-items: center;
      .item-img {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }
}
</style>
